
@width: 6px;

.Triangle(@w: left,@a: right,@c: top,@t:transparent,@q:transparent,@u:#333) {
  border-@{w}: 6px solid @t;
  border-@{a}: 6px solid @q;
  border-@{c}: 6px solid @u;
}
.ve-tip-parent--relative {
  position: relative;
}
.tip {
  position: absolute;
  color: white;
  background-color: #333;
  border-radius: 4px;
  font-size: 12px;
  padding: 6px 12px;
  transition: opacity .5s, transform .5s;
  will-change: opacity, transform;
  p {
    margin: 0;
  }
  &::before {
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -3px - @width;
    width: 0;
    height: 0;
  }
}
.tip.ve-tip-top {
  transform: translate(-50%, -50%);
  &::before {
    top: 100%;
    .Triangle(left, right, top)
  }
}
.ve-tip-bottom {
  transform: translate(-50%, 100%);
  &::before {
    top: -6px;
    .Triangle(left, right, bottom)
  }
}
.ve-tip-left {
  transform: translate(-100%, -50%);
  &::before {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    .Triangle(top, bottom, left)
  }
}
.ve-tip-right {
  transform: translate(6px, -50%);
  &::before {
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    .Triangle(bottom, top, right)
  }
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
